<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书信息管理</title>
    <script src="/js/jquery-3.5.1.js"></script>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

    <style>

        .popwindow{width: 500px;height: 500px;position: fixed;
            left: 50%;margin-left: -250px;top: 50%;margin-top: -250px;
            border: 1px solid gray;box-shadow: 0px 0px 5px gray;
            background-color: #f5edff;
            display: none;
        }

        .popwindow .title{width: 100%;height: 20px;background-color: darkslateblue}
        .popwindow .title span{float: right;color: white}

        #table-list{
            width: 100%;
            background-color: #9F9F9F;
        }

        .pager{
            width: 100%;
            height: 40px;
            margin-left: 25%;
        }
        .clearfix li{
            float: left;
            list-style:none;

            width: 50px;

        }
        .bth{
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
            background-color: #bbc4bb; /* Green */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 10px;
        }




    </style>

</head>
<body>
<div>
  <h1>
    图书信息管理
  </h1>
</div>
<div>

</div>
<div id="list">
    <table id="table-list" class="table">

        <thead>
        <tr>
            <th> 编号</th>
            <th>名称</th><th>价值</th>
            <th>借阅价格</th>  <th>作者</th><th>出版社</th><th>出版日期</th><th>原始库存</th>
            <th>图书类型</th>
            <th>书籍编号</th>
            <th>地址</th>
            <th>现有库存</th>

            <th>操作</th>
        </tr>
    </thead>
        <tbody class="list" id="tbody-list">
        </tbody>
        <tbody>
        <tr>
            <td colspan="8" align="center">
                <div class="pager">
                    <ul class="clearfix">
                        <li class="prev">上一页</li>
                        <li><input type="button" class="page" value="1"></li>
                        <li><input type="button" class="page" value="2"></li>
                        <li><input type="button" class="page" value="3"></li>
                        <li><input type="button" class="page" value="4"></li>
                        <li><input type="button" class="page" value="5"></li>
                        <li><input type="button" class="page" value="6"></li>
                        <li class="prev">下一页</li>
                    </ul>
                </div>
            </td>

        </tr>
        </tbody>

    </table>

</div>

<div id="book-alter-msg" class="book-alter-msg">

</div>


<div class="popwindow" id="popwindow">
    <div class="title" >修改<span  onclick="closeWindow()">X</span></div>
    <div>
        书籍编号:<input type="text" readonly id="win-bookId" maxlength="4" name="win-bookId"><span id="bookIdip"></span> <br/>


        名称:<input type="text"  id="win-bookName"  name="win-bookName"><span id="bookNameTip"></span> <br/>

        价值: <input type="text" id="price" name="price"><span id="PriceTip"></span><br/>
        借阅单价:<input type="text" id="borrowPrice" name="borrowPrice"><span id="borrowPriceTip"></span><br/>
        现有库存:<input type="text" id="stock" name="stock"><span id="stockTip"></span><br/>
        出版社:<input type="text" id="press" name="press"><span id="pressTip"></span><br/>
        书籍编号:<input type="text" id="bookNumber" name="bookNumber"><span id="bookNumberTip"></span><br/>
        书籍作者:<input type="text" id="author" name="author"><span id="authorTip"></span><br/>

        图书类型:<select name="booktype" id="booktype">
        <option value="1">言情</option>
        <option value="2">信息技术</option>
        <option value="14" >小说</option>
        <option value="15">社会科学</option>
        <option value="16">经济管理</option>
        <option value="17">文艺金典</option>
    </select>

        <input id="book-alter-sub" type="button"   value="提交">

        </form>
    </div>
</div>
</body>
</html>
<script>
    window.setInterval(function () {
        //window.location.href="/EmpQueryServlet"
    },10000)

    function closeWindow() {
        document.getElementById("popwindow").style.display="none";
    }

    $(document).ready(function() {
        let page=1;
        ad(page)
    })
    $(".page").click(function () {
        let page= $(this).val();
        console.log(page)
        ad(page)
    })
    function ad(page){
        $.post("/books-list.admin", {"index": page}, function (text) {

            // console.log(text)
            let indexs = text.indexOf(",")
            let resolves = text.substring(0, indexs);
            // console.log(resolves)//总条数
            let page = Math.ceil(Number(resolves) / 4);//生成页数
            // for(let j=1;)

            let list = text.substring(indexs + 1, text.length);

            // console.log(list)
            let borObj = JSON.parse(list)
            $("#tbody-list").empty();
            // console.log(borObj)
            for (let i = 0; i < borObj.length; i++) {
                let trObj = document.createElement("tr");
                for (let attr in borObj[i]) {//遍历js对象,attr代码属性名,我们可以根据属性名获得对象的属性值
                    console.log("属性名:", attr, "属性值:", borObj[i][attr]);
                    let tdObj = document.createElement("td");
                    tdObj.innerHTML = borObj[i][attr];//将对象的属性值做为td的文本内容
                    trObj.appendChild(tdObj);//把td放到tr对象中。
                    $("#tbody-list").append(trObj)
                }
                let tdObj2 = document.createElement("td");
                //创建删除和编辑按钮，并为删除和编辑按钮添加点击事件
                let delBtnObj = document.createElement("input");
                delBtnObj.type = "button";
                delBtnObj.value = "下架";
                delBtnObj.className="bth"

                delBtnObj.onclick = function () {
                    //点击删除按钮，询问用户是否确认删除，用户点击确认后，获得当前行的员工号
                    let confirmRes = confirm("请确认是否下架?");
                    if (confirmRes) {
                        let bookid = this.parentElement.parentElement.children[0].innerHTML;//得到当前行的员工号
                        deleteBooks(bookid, this);
                        ad(page-1)
                    }
                }
                tdObj2.appendChild(delBtnObj);
                trObj.appendChild(tdObj2);

                let updateBtnObj = document.createElement("input");
                updateBtnObj.type="button";updateBtnObj.value="修改";
                updateBtnObj.className="bth";
                updateBtnObj.onclick= function () {//修改按钮的点击事件
                    document.getElementById("popwindow").style.display="block";
                    //将当前行的数据显示到弹出窗的表单中
                    //方式1： 获得当前修改按钮所在行对应td的内容(员工号，姓名....) 逐个的放到input元素中
                    let tdArray =  this.parentElement.parentElement.children;

                    $("#win-bookName").val(borObj[i].bookName);
                    $("#win-bookid").val(borObj[i].bookId);
                    $("#price").val(borObj[i].price);
                    $("#borrowPrice").val(borObj[i].borrowPrice);
                    $("#author").val(borObj[i].author);
                    $("#press").val(borObj[i].press);
                    $("#stock").val(borObj[i].stock);
                    $("#bookNumber").val(borObj[i].bookNumber);
                    $("#booktype").val(borObj[i].typeName);
                    //部门号
                    let selectObj =  document.getElementById("booktype");
                    for(let k =0;k<selectObj.children.length;k++){
                        console.log(selectObj.children[k].value, borObj[i].booktype)
                        if (selectObj.children[k].value===borObj[i].booktype){
                            //  selectObj.children[k].setAttribute("selected",true);
                            selectObj.children[k].selected=true;
                        }
                    }
                    console.log("当前员工数据为:",borObj[i]);
                }
                tdObj2.appendChild(updateBtnObj);
            }

        })
    }


    function deleteBooks(bookid,delObj){
        $.post("/book-del.admin", {"id": bookid}, function (text) {
            $("#book-alter-msg").html(text)
            if(text=="下架成功"){
                $("#book-alter-msg").css("display","red").html("下架成功")

                $("#tbody-list").remove(delObj.parentElement.parentElement);

            }

        })

    }
    //关闭修改窗口

    $(function (){
        $("#book-alter-sub").click(function (){
            let bookName=$("#win-bookName").val();
            let bookid=$("#win-bookId").val();
            let bookPrice=$("#price").val();
            let bookBorrowPrice=$("#borrowPrice").val();
            let bookAuthor=$("#author").val();
            let bookPress=$("#press").val();
            let bookStock=$("#stock").val();
            let bookNumber=$("#bookNumber").val();
            let bookTYpe=$("#booktype").val();

            console.log(bookName)
            console.log(bookTYpe)
            console.log(bookAuthor)

            $.post("/book-alter.admin","bookName="+bookName+"&bookPrice="+
                bookPrice+"&bookBorrowPrice="+bookBorrowPrice+"&bookAuthor="+
                bookAuthor+"&bookPress="+
                bookPress+"&bookid="+bookid+"&bookStock="+bookStock+"&bookNumber="+
                bookNumber+"&bookTYpe="+bookTYpe,function (text) {
                $("#book-alter-msg").css("display","red").html("修改成功")

            })
        })
        })



</script>




